<template>
    <div class="both-bg" id="both-bg" v-show="IsShow" @click.self="changeImgshowOR">
        <div class="both-showor banxin">
            <i @click.self="changeImgshowOR">X</i>
            <strong class="l" @click="nextClickFn(-1)">&lt;</strong>
            <strong class="r" @click="nextClickFn(1)">&gt;</strong>
            <img :src="imgurl" alt="">
        </div>
    </div>
    <!-- 需要接收2个参数  一个是图片地址 一个是是否显示 默认是false -->
</template>

<script>
export default {
    data () {
        return {
        }
    },
    props:['IsShow','imgurl'],
    methods:{
        changeImgshowOR(){
            this.$emit("changeShow",'')
        },
        nextClickFn(e){
            this.$emit("nextClickFn",e)
        }
    }
}
</script>
 
<style lang = "less" scoped>
.both-bg {
    position: fixed;
    width: 100%;
    min-width: 1002px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5);
    animation: runs 0.5s;
   .both-showor {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        img {
            width: 1000px;
            display: block;
            margin: 0 auto;
        }
        i{
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 30px;
            color: white;
            cursor: pointer;
        }
        strong {
            opacity: 0;
            transition: all 0.3s;
            position: absolute;
            font-size: 50px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            line-height: 50px;
            border: 2px solid white;
            text-align: center;
            cursor: pointer;
            mix-blend-mode: screen;
            &.r {
                right: 10px;
            }
            &.l {
                left: 10px;
            }
            &:hover {
                animation: runborder 1s ease-in infinite;
                animation-direction : alternate ;
            }
        }
        &:hover strong{
            opacity: 1;
        }
    } 
}
@keyframes runs {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes runborder {
    0%{
        border-color: rgb(255, 255, 255);
    }
    100%{
        border-color: rgb(0, 0, 0); 
    }
}
</style>